<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>冷文博客-后台管理系统</title>
    <script src="../../static/js/vue.js"></script>
    <link rel="stylesheet" href="../../static/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../static/elementui/index.css">
    <link rel="stylesheet" href="../../static/css/style.css">
    <script src="../../static/elementui/index.js"></script>
    <script src="../../static/js/moment.js"></script>
    <style>
        .el-card__body {
            padding: 0px !important;
        }

        .el-tabs__nav {
            width: 100%;
        }

        .el-tabs__item {
            width: 50%;
            text-align: center;
        }

        .el-tabs__content {
            padding: 0 !important;
        }
    </style>
</head>
<body style="background-color: #262C35;">
<div id="app">
    <el-row style="margin-top: 200px;">
        <el-col :span="5" :offset="10">
            <h1 style="color: #ffffff; text-align: center;margin-bottom: 50px;">冷文博客-后端管理系统</h1>
            <el-card style="border-radius: 0;">
                <el-tabs style="margin: 0;" v-model="activeName" height="290" type="border-card"
                         @tab-click="handleClick">
                    <el-tab-pane label="账号登录" name="login">
                        <div style="padding: 40px 30px 20px 10px;">
                            <el-form :model="entity"
                                     status-icon
                                     label-position="right"
                                     label-width="80px"
                                     :rules="rules"
                                     label-suffix=": "
                                     ref="loginForm">
                                <el-form-item label="用户名" prop="age">
                                    <el-input v-model.number="entity.age" prefix-icon="fa fa-user"></el-input>
                                </el-form-item>
                                <el-form-item label="密码" prop="pass">
                                    <el-input type="password" v-model="entity.pass"
                                              prefix-icon="fa fa-lock"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" style="width: 100%;" @click="submitForm('loginForm')">登录
                                    </el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="微信登录" style="padding: 0;" name="wechat">
                        <div style="padding: 20px;">
                            <div style="width: 200px;margin: 0 auto;">
                                <img src="../../static/img/wechat.png" width="100%" alt="">
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </el-col>
    </el-row>

</div>
<script>
    new Vue({
        el: "#app",
        data: {
            entity: {},
            rules: {},
            activeName: 'login'
        },
        methods: {
            submitForm: (name) => {
                location.href = '../index.html'
            },
            handleClick: (tab, event) => {
                console.log(tab, event);
            }
        },
        created: function () {

        }
    })
</script>
</body>
</html>